<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>职位code：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.code"
                        clearable
                        placeholder="职位名"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                    >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                    >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="clickLineAdd()"
                >新增数据
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                default-expand-all
                :tree-props="{
                    children: 'children',
                    hasChildren: 'leaf'
                }"
                @selection-change="tableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="name" label="职位名称" min-width="100">
                    <template slot-scope="scope">
                        <el-input
                            v-if="scope.row.edit"
                            v-model="lineDataForm[scope.$index].name"
                        ></el-input>
                        <span v-else>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="code" label="职位Code" width="120">
                    <template slot-scope="scope">
                        <el-input
                            v-if="scope.row.edit && scope.row.addAction"
                            v-model="lineDataForm[scope.$index].code"
                        ></el-input>
                        <span v-else>{{ scope.row.code }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="创建日期"
                    width="180"
                >
                    <template slot-scope="scope">
                        <el-cascader
                            v-if="scope.row.edit"
                            v-model="lineDataForm[scope.$index].parentId"
                            :options="tableData.filter(v => !v.addAction)"
                            placeholder="上级职位"
                            :show-all-levels="false"
                            clearable
                            filterable
                            :props="{
                                value: 'id',
                                label: 'name',
                                emitPath: false,
                                disabled: 'edit',
                                checkStrictly: true
                            }"
                            @change="
                                vl =>
                                    selectParent(
                                        vl,
                                        lineDataForm[scope.$index],
                                        lineDataForm[scope.$index].parent ||
                                            tableData
                                    )
                            "
                        >
                        </el-cascader>
                        <span v-else>{{ scope.row.createdTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="modifyTime"
                    label="最后操作日期"
                    width="180"
                >
                </el-table-column>

                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            class="primary"
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="clickLineEdit(scope.$index, scope.row)"
                            >编辑
                        </el-button>
                        <el-button
                            v-if="scope.row.edit"
                            class="primary"
                            size="mini"
                            type="text"
                            icon="el-icon-folder-checked"
                            :loading="scope.row.opLoading"
                            @click="
                                clickLineSave(
                                    scope.$index,
                                    scope.row,
                                    '/user/cu/admin/position/update'
                                )
                            "
                            >保存
                        </el-button>
                        <el-button
                            v-if="scope.row.edit"
                            class="warning"
                            size="mini"
                            type="text"
                            icon="el-icon-close"
                            :loading="scope.row.opLoading"
                            @click="clickLineCancel(scope.$index, scope.row)"
                            >取消
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            class="danger"
                            type="text"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/user/cu/admin/position/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true,
                                    () => removeLineData(scope.row)
                                )
                            "
                            >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import Fetch from "@/api/request.js";
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { treeList2Tree, beanCopy } from "@/utils/index.js";

export default {
    name: "PositionList",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            queryData: {
                name: "",
                code: "",
                size: 1000
            },

            initAddForm: {
                name: null,
                code: null
            }
        };
    },
    computed: {
        ...mapState({})
    },
    mounted() {},
    methods: {
        search(queryData) {
            this.loadTable(
                "/user/cu/admin/position/list",
                queryData,
                true
            ).then(res => {
                res = res.map(da => {
                    return {
                        ...da,
                        opLoading: false,
                        edit: false
                    };
                });
                this.tableData = treeList2Tree(res);
            });
        }
    }
};
</script>
